<template>
<div class="jinghe1">
  <!-- <div class="time">统计时间：2020.12</div> -->
  <div class="jinghe-title" :class="poptitle[0]=='行业'? 'active':'active' ">
    <div class="title-item" v-for="(item,index) in poptitle">
    <img class="icon" src="/images/jinghe/right/行业icon@2x.png" alt="" v-if="index==0&&poptitle[0]=='行业'"  >
     {{item}}
    </div>
  </div>
<div class="jingheList" >
  <div class="jingheList-title" v-for="item in popdata" @mouseenter="enter(item)" @mouseleave="leave">
    <div class="jingheList-title-item" style="text-align: left;">
      <!-- <div class="pop" v-show="showItem">{{dataItem}}</div> -->
      <img class="icon icon2" src="/images/jinghe/right/小三角@2x.png" alt="" >
      <span style="margin-left:24px; display: -webkit-box;-webkit-box-orient: vertical;overflow: hidden;-webkit-line-clamp: 1;">{{item.name}}</span>
    </div>
    <div class="jingheList-title-item" v-for="item1 in item.dataList[0]" :key="item1">
      {{item1}}
    </div>
  </div>
  <div class="pop" v-show="showItem">{{dataItem}}</div>
</div>

</div>
</template>
<script>

export default{
  name: "jinghe1",

  props:{
    popdata: {
      type: [Array, Object],
      required: true
    },
  },
  data () {
    return {
      // poptitle: ['高端装备', '钕铁硼永磁', '交通装备']
      poptitle: ['行业', '企业数', '竞争强度', '合作强度'],
      dataItem: '',
      showItem: false,
    }
  },
  watch: {
    popdata: function(){
      console.log(this.popdata[0].dataList[0])
    }
  },
  mounted(){
  },
  methods: {
    enter(item){
      // console.log(item);
      if(item.name){
        this.dataItem = item.name
        // console.log(this.dataItem)
      }
      this.showItem = true

    },
    leave(){
      this.showItem = false
      // if (this.initInterval) {
        
      //   return 
      // }
    },
  }
}




</script>

<style lang="stylus" scoped>
.time{
  position absolute
  top -35px
  right 5px
  font-size 15px
  font-family Source Han Sans CN
  font-weight 400
  line-height 31px
  color: #B7B7B7
}
.jinghe1{
  position relative
  padding-top: 30px;
  width 100%;
  margin-bottom 20px;
  .jinghe-title{
    width 100%;
    height 29px;
    background rgba(177, 124, 44, 0.3);
    display flex;
    justify-content space-between;
    margin-bottom 10px;
    &.active{
      background rgba(29, 84, 180, 0.3);
    }
    .title-item{
      font-size 17px;
      font-family Source Han Sans CN;
      font-weight 400;
      line-height 30px;
      color #DFF8FF;
      width 80px;
      text-align:center;
      
      &:nth-child(1){
        text-align: left;
        padding-left: 14px;
        box-sizing: border-box;
        width 120px
      }
      .icon{
        width 19px;
        height 16px;
        vertical-align: middle;
      }
    }
  }
}
.jingheList{
  width 100%;
  box-sizing: border-box;
  .jingheList-title{
    width 100%;
    height 29px;
   
    border-bottom: 1px dashed #99C8FF
    display flex;
    justify-content space-between;
    margin-bottom 10px;
    .jingheList-title-item{
      position relative;
      font-size 17px;
      font-family Source Han Sans CN;
      font-weight 400;
      line-height 33px;
      color #DFF8FF;
      width 80px;
      text-align:center;
      &:nth-child(1){
        width 123px
      }
      .icon{
        width 19px;
        height 16px;
        vertical-align: middle;
      }
    }
  }
}
.icon2{
  position: absolute;
  top: 8px;
  left: 0;
}
.pop {
  position: absolute;
  white-space: nowrap;
  display: block;
  top: 70px;
  right: 390px;
  // min-width: 145px;
  height: 40px;
  line-height: 40px;
  text-align: right;
  background-color: #031026;
  font-weight: 400;
  color: #DFF8FF;
}
</style>